<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Field Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="700" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw an arrowhead on a line
        function drawArrow(ctx, fromx, fromy, tox, toy) {
            const headlen = 10;
            const angle = Math.atan2(toy - fromy, tox - fromx);
            ctx.beginPath();
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // Helper function for the head of a curved arrow
        function drawCurvedArrowHead(ctx, x, y, angle, headlen) {
            ctx.save();
            ctx.translate(x, y);
            ctx.rotate(angle);
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(-headlen, -headlen / 2.5);
            ctx.moveTo(0, 0);
            ctx.lineTo(-headlen, headlen / 2.5);
            ctx.stroke();
            ctx.restore();
        }


        // Main drawing function
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.strokeStyle = 'black';
            ctx.fillStyle = 'black';
            ctx.lineWidth = 2;

            const cx = canvas.width / 2;
            const cy = canvas.height / 2;

            // Dimensions
            const cylinderLength = 450;
            const cylinderRadiusY = 90;
            const cylinderRadiusX = 35;
            const coilRadiusY = 70;
            const coilRadiusX = 25;

            // 1. Draw the Cylinder
            ctx.beginPath();
            ctx.moveTo(cx - cylinderLength / 2, cy - cylinderRadiusY);
            ctx.lineTo(cx + cylinderLength / 2, cy - cylinderRadiusY);
            ctx.moveTo(cx - cylinderLength / 2, cy + cylinderRadiusY);
            ctx.lineTo(cx + cylinderLength / 2, cy + cylinderRadiusY);
            ctx.stroke();

            // Right end of cylinder
            ctx.beginPath();
            ctx.ellipse(cx + cylinderLength / 2, cy, cylinderRadiusX, cylinderRadiusY, 0, 0, 2 * Math.PI);
            ctx.stroke();

            // Left end of cylinder (front half only)
            ctx.beginPath();
            ctx.ellipse(cx - cylinderLength / 2, cy, cylinderRadiusX, cylinderRadiusY, 0, -Math.PI / 2, Math.PI / 2);
            ctx.stroke();

            // 2. Draw the x-axis
            ctx.beginPath();
            ctx.setLineDash([6, 4]);
            ctx.moveTo(cx - cylinderLength / 2 - 40, cy);
            ctx.lineTo(cx + cylinderLength / 2 + 60, cy);
            ctx.stroke();
            // Arrowhead for x-axis
            drawArrow(ctx, cx + cylinderLength / 2 + 50, cy, cx + cylinderLength / 2 + 60, cy);
            // Label 'x'
            ctx.setLineDash([]);
            ctx.font = 'italic 24px Times New Roman';
            ctx.fillText('x', cx + cylinderLength / 2 + 75, cy + 8);

            // 3. Draw the Coil
            // Back half (dashed)
            ctx.beginPath();
            ctx.setLineDash([4, 4]);
            ctx.ellipse(cx, cy, coilRadiusX, coilRadiusY, 0, Math.PI / 2, 3 * Math.PI / 2);
            ctx.stroke();
            // Front half (solid)
            ctx.beginPath();
            ctx.setLineDash([]);
            ctx.ellipse(cx, cy, coilRadiusX, coilRadiusY, 0, -Math.PI / 2, Math.PI / 2);
            ctx.stroke();

            // 4. Draw Origin Point and Label 'O'
            ctx.beginPath();
            ctx.arc(cx, cy, 3.5, 0, 2 * Math.PI);
            ctx.fill();
            ctx.font = 'italic 24px Times New Roman';
            ctx.fillText('O', cx - 30, cy - 8);

            // 5. Draw Radius 'R'
            ctx.beginPath();
            ctx.moveTo(cx, cy);
            ctx.lineTo(cx, cy + coilRadiusY);
            ctx.stroke();
            drawArrow(ctx, cx, cy + coilRadiusY - 10, cx, cy + coilRadiusY);
            // Label 'R'
            ctx.font = 'italic 24px Times New Roman';
            ctx.fillText('R', cx + 12, cy + coilRadiusY / 2 + 8);

            // 6. Draw Current 'I₀'
            // Label 'I₀'
            ctx.font = 'italic 24px Times New Roman';
            ctx.fillText('I', cx - 80, cy + 8);
            ctx.font = 'italic 18px Times New Roman';
            ctx.fillText('0', cx - 68, cy + 14);

            // Curved arrow for current
            ctx.beginPath();
            const startX = cx - 8;
            const startY = cy - coilRadiusY + 3;
            const endX = cx + 5;
            const endY = cy - coilRadiusY - 5;
            const ctrlX = cx - 18;
            const ctrlY = cy - coilRadiusY - 20;
            ctx.moveTo(startX, startY);
            ctx.quadraticCurveTo(ctrlX, ctrlY, endX, endY);
            ctx.stroke();
            // Arrowhead for the curve
            const tangentAngle = Math.atan2(endY - ctrlY, endX - ctrlX);
            drawCurvedArrowHead(ctx, endX, endY, tangentAngle, 12);
        }

        draw();
    </script>
</body>
</html>